Add CdrObjectOverlay Component with Positioning and Customization Options#206
Merged
c4rlosviteri merged 16 commits intomainfrom Mar 19, 2025
Merged
Add CdrObjectOverlay Component with Positioning and Customization Options#206c4rlosviteri merged 16 commits intomainfrom
c4rlosviteri merged 16 commits intomainfrom
Conversation
Member
It looks like the gradient is clipping, but the overlay content is not
|
mhewson
approved these changes
Mar 18, 2025
| Spacing, | ||
| Gradient, | ||
| ResponsiveGradient | ||
| } from '../../types/interfaces'; |
Member
There was a problem hiding this comment.
at what point do we want to start types/interfaces/"file" or "pattern"
|
|
||
| // Dark theme gradients (default) | ||
| $dark-gradients: ( | ||
| 'to-top': linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 20%, transparent 40%), |
Member
There was a problem hiding this comment.
Is that the updated black value from Michelle?
Member
There was a problem hiding this comment.
also I think these are good candidates for custom props, and gradient tokens
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces the CdrObjectOverlay component—a flexible overlay solution for positioning content relative to a container in nine different positions. The component is designed to be highly customizable, allowing developers to adjust the positioning, margin, and even the HTML tag used for the overlay container.
Key Features
Flexible Positioning: The component accepts a position prop that supports the following values:
Customizable Margin: The margin prop allows developers to specify the spacing around the overlay content. By default, this is set to 0.
HTML Tag Customization: With the tag prop, you can define the HTML tag for the container element. The default is div, but it can be changed to any valid HTML tag (e.g., section, article).
Slots for Content: The component defines two slots:
This PR adds a versatile overlay component that aligns with our existing design system and development patterns. The tests ensure reliability and consistency, preparing this component for integration into larger projects.